<script lang="ts" setup>
	import { ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { CourseApi } from '@/api/course'
	import {
		UnorderedListOutlined,
		HistoryOutlined,
	} from '@ant-design/icons-vue';
	const router = useRouter()

	let timeout : any;
	let currentValue = '';

	function fetch(value : string, callback : any) {
		if (timeout) {
			clearTimeout(timeout);
			timeout = null;
		}
		currentValue = value;

		function fake() {
			CourseApi.getCourse({
				title: value,
				size: 999,
				page: 1
			}).then((res : any) => {
				if (res.code == 1) {
					if (currentValue === value) {
						const result = res.data.list;
						const data : any[] = [];
						result.forEach((item : any) => {
							data.push({
								value: item.id,
								label: item.title,
							});
						});
						callback(data);
					}
				}
			})
		}
		timeout = setTimeout(fake, 300);
	}
	let data = ref<any[]>([]);
	let value = ref();
	const handleSearch = (val : string) => {
		fetch(val, (d : any[]) => (data.value = d));
	};
	const handleChange = (val : string) => {
		value.value = val;
		fetch(val, (d : any[]) => (data.value = d));
	};


	let courseList = ref<any>([])
	let count = ref(0)
	let current = ref(1);
	const getCourse = () => {
		CourseApi.getCourse({
			title: '',
			size: 12,
			page: current.value
		}).then((res : any) => {
			if (res.code == 1) {
				courseList.value = [...res.data.list]
				count.value = res.data.count
			}
		})
	}
	getCourse()
	const toDetail = (id : number) => {
		let routerData = router.resolve({ name: 'courseDetail', query: { id: id } })
		window.open(routerData.href,"_blank")
	}
</script>

<template>
	<div class="course-header">
		<div class="title">全方位在线培训课程</div>
		<div class="text">帮助您轻松开启协作之旅</div>
		<div class="search-box">
			<a-select v-model:value="value" show-search placeholder="请输入关键字" :default-active-first-option="false"
				:show-arrow="true" :filter-option="false" :not-found-content="null" :options="data"
				@search="handleSearch" @change="handleChange" class="custom-input" @select="toDetail" size="large"></a-select>
		</div>
	</div>
	<div class="course-content">
		<div class="item item1">
			<div class="title">
				培训课程
			</div>
			<div class="text">
				循序渐进的课程体系，助你开启协作之旅
			</div>
			<div class="item1-box">
				<div class="course" v-for="(item,index) in courseList" :key="index" @click="toDetail(item.id)">
					<img :src="item.cover" />
					<div class="text-box">
						<div class="course-title">
							{{item.title}}
						</div>
						<div class="course-text">
							{{item.synopsis}}
						</div>
						<div class="time">
							<UnorderedListOutlined class="icon" />{{item.chapter}}个章节
							<span>·</span>
							<HistoryOutlined class="icon" /> {{item.duration}}
						</div>
					</div>
				</div>
			</div>
			<div class="page">
				<a-pagination v-model:current="current" :total="count" hideOnSinglePage :pageSize="12" />
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.course-header {
		width: 100%;
		height: 500px;
		padding-top: 200px;
		background: url(../../assets/image/course/header-bg.jpg);
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		border-radius: 8px;

		.title {
			font-size: 40px;
			font-weight: bold;
			line-height: 60px;
		}

		.text {
			font-size: 22px;
			font-weight: bold;
			line-height: 44px;
		}

		.search-box {
			margin-top: 40px;
			width: 500px;
		}

		.custom-input {
			width: 500px;
		}
	}

	.course-content {
		.item {
			width: 1280px;
			margin: 0 auto;
			padding: 80px 0;

			.title {
				font-size: 32px;
				font-weight: bold;
				text-align: center;
			}

			.text {
				margin-top: 25px;
				color: #495770;
				line-height: 25px;
				text-align: center;
			}
		}

		.item1 {
			.item1-box {
				margin-top: 40px;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-template-rows: auto auto;
				gap: 20px;

				.course {
					width: 300px;
					box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
					cursor: pointer;

					img {
						width: 300px;
						height: 160px;
					}

					.text-box {
						padding: 20px;

						.course-title {
							font-size: 16px;
							font-weight: bold;
							line-height: 18px;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							height: 36px;
							
						}

						.course-text {
							color: #495770;
							margin-top: 10px;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							line-height: 25px;
							height: 50px;
							font-size: 14px;
						}

						.time {
							margin-top: 20px;
							display: flex;
							align-items: center;
							color: #848484;
							font-size: 12px;

							.icon {
								font-size: 16px;
								margin-right: 5px;
							}

							span {
								margin: 0 5px;
								font-size: 16px;
							}
						}
					}
				}
			}

			.page {
				display: flex;
				justify-content: center;
				margin-top: 40px;
			}
		}
	}
</style>